<!-- 图片上传裁剪组件 -->
<template>
	<div>
		<div class="cropper-content" v-show="showSelectImg">
			<div class="cropper">
				<vueCropper
					ref="cropper"
					:img="defaultOption.img"
					:outputSize="defaultOption.outputSize"
					:outputType="defaultOption.outputType"
					:info="defaultOption.info"
					:full="defaultOption.full"
					:canMove="defaultOption.canMove"
					:original="defaultOption.original"
					:canMoveBox="defaultOption.canMoveBox"
					:autoCrop="defaultOption.autoCrop"
					:autoCropWidth="defaultOption.autoCropWidth"
					:autoCropHeight="defaultOption.autoCropHeight"
					:fixed="defaultOption.fixed"
					:fixedNumber="defaultOption.fixedNumber"
					@realTime="realTime"
					@imgLoad="imgLoad"
				></vueCropper>
			</div>
			<div
				class="show-preview"
				:style="{
					width: previews.w + 'px',
					height: previews.h + 'px',
					overflow: 'hidden',
					margin: '5px'
				}"
			>
				<div :style="previews.div" class="preview">
					<img :src="previews.url" :style="previews.img" />
				</div>
			</div>
		</div>
		<div v-show="!showSelectImg">
			<img
				:src="defaultOption.img"
				:style="{
					width: defaultOption.autoCropWidth + 'px',
					height: defaultOption.autoCropHeight + 'px'
				}"
			/>
		</div>
		<div class="footer-btn">
			<div class="scope-btn">
				<label v-if="!disabled" class="btn" for="uploads">选择图片</label>
				<input
					type="file"
					id="uploads"
					style="position: absolute; clip: rect(0 0 0 0)"
					accept="image/png, image/jpeg, image/gif, image/jpg"
					@change="uploadImg($event)"
				/>
				<el-button v-show="showSelectImg" @click="changeScale(1)">放大</el-button>
				<el-button v-show="showSelectImg" @click="changeScale(-1)">缩小</el-button>
				<el-button v-show="showSelectImg" @click="rotateRight">向右转</el-button>
			</div>
			<div class="upload-btn" v-show="showSelectImg">
				<el-button v-if="!disabled" type="primary" style="margin-left: 46px" @click="down('blob')">确定</el-button>
			</div>
		</div>
	</div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
export default {
	props: {
		// 配置
		option: {
			type: Object,
			default() {
				return {}
			}
		},
		// 图片上传状态 false失败 true成功
		imgUploadStatus: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			showSelectImg: true,
			previews: {},
			// git地址 https://github.com/xyxiao001/vue-cropper
			defaultOption: {
				img: '', // 裁剪图片的地址
				outputSize: 1, // 裁剪生成图片的质量
				outputType: 'png', // 裁剪生成图片的格式
				info: false, // 裁剪框的大小信息
				full: true, // 输出原图比例截图 props名full
				canMove: true, // 上传图片是否可以移动
				original: false, // 上传图片按照原始比例渲染
				canMoveBox: true, // 截图框能否拖动
				autoCrop: true, // 是否默认生成截图框
				autoCropWidth: 200, // 默认生成截图框宽度
				autoCropHeight: 150, // 默认生成截图框高度
				fixed: false, // 是否开启截图框宽高固定比例
				fixedNumber: [4, 3] // 截图框的宽高比例
				// fixedBox: false, // 固定截图框大小
			},
			downImg: '#'
		}
	},
	watch: {
		option: {
			handler(newVal) {
				this.initData(newVal)
			},
			deep: true
		},
		imgUploadStatus: {
			handler(newVal) {
				this.showSelectImg = !newVal
			},
			deep: true
		}
	},
	created() {
		this.initData(this.option)
	},
	components: { VueCropper },
	methods: {
		initData(newVal) {
			Object.assign(this.defaultOption, newVal)
			this.showSelectImg = this.defaultOption.img ? false : true
		},
		changeScale(num) {
			num = num || 1
			this.$refs.cropper.changeScale(num)
		},
		rotateLeft() {
			this.$refs.cropper.rotateLeft()
		},
		rotateRight() {
			this.$refs.cropper.rotateRight()
		},
		// 实时预览函数
		realTime(data) {
			this.previews = data
		},
		down(type) {
			var aLink = document.createElement('a')
			aLink.download = 'author-img'
			// 输出
			if (type === 'blob') {
				this.$refs.cropper.getCropBlob(data => {
					this.$emit('handleImg', data)
				})
			} else {
				this.$refs.cropper.getCropData(data => {
					this.downImg = data
				})
			}
		},
		uploadImg(e) {
			this.showSelectImg = true
			//上传图片
			var file = e.target.files[0]
			if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
				alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
				return false
			}
			var reader = new FileReader()
			reader.onload = e => {
				let data
				if (typeof e.target.result === 'object') {
					// 把Array Buffer转化为blob 如果是base64不需要
					data = window.URL.createObjectURL(new Blob([e.target.result]))
				} else {
					data = e.target.result
				}
				this.defaultOption.img = data
			}
			// 转化为base64
			reader.readAsDataURL(file)
			// 转化为blob
			// reader.readAsArrayBuffer(file)
		},
		imgLoad(msg) {
			// console.log(msg);
		}
	}
}
</script>
<style lang="scss">
.cropper-content {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 30px;
	.cropper {
		width: 350px;
		height: 300px;
	}
	.show-preview {
		flex: 1;
		display: flex;
		justify-content: center;
		.preview {
			overflow: hidden;
			//   border-radius: 50%;
			border: 1px solid #cccccc;
			background: #cccccc;
			margin-left: 40px;
		}
	}
}
.footer-btn {
	display: flex;
	// justify-content: flex-end;
	.scope-btn {
		width: 350px;
		display: flex;
		justify-content: space-between;
	}
	.upload-btn {
		flex: 1;
		display: flex;
		justify-content: center;
	}
	.btn {
		outline: none;
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		text-align: center;
		box-sizing: border-box;
		outline: 0;
		margin: 0;
		transition: 0.1s;
		font-weight: 500;
		padding: 10px 15px;
		font-size: 12px;
		border-radius: 3px;
		color: #fff;
		background-color: #67c23a;
		border-color: #67c23a;
	}
}
</style>
